<template>
  <a-drawer
    :title="title"
    placement="right"
    :closable="true"
    :maskClosable="true"
    @close="onDrawerClose"
    :visible="visible"
    :width="800"
    :keyboard="true"
    :getContainer="false"
  >
    <a-spin :spinning="loading">
      <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
        <table id="tables">
          <tr>
            <th colspan="4">基础信息</th>
          </tr>
          <tr>
            <td class="tit">电梯品牌</td>
            <td class="val">{{ entity.E_Brand }}</td>
            <td class="tit">电梯系列</td>
            <td class="val">{{ entity.E_Series }}</td>
          </tr>
          <tr>
            <td class="tit">机房类型</td>
            <td class="val">{{ entity.E_RoomType }}</td>
            <td class="tit">轿厢类型</td>
            <td class="val">{{ entity.E_LiftCarType }}</td>
          </tr>
          <tr>
            <td class="tit">有无对重安全钳</td>
            <td class="val">{{ entity.E_SafetyBear === true ? '有' : '无' }}</td>
            <td class="tit">对重类型</td>
            <td class="val">{{ entity.E_CounterWeight }}</td>
          </tr>
          <tr>
            <td class="tit">开门方式</td>
            <td class="val">{{ entity.E_OpenDoorMode }}</td>
            <td class="tit">批准状态</td>
            <td class="val" v-if="entity.ApprovalStatus=='0'" style="color: red">
              <a-icon type="close-circle" />&nbsp;未通过
            </td>
            <td class="val" v-if="entity.ApprovalStatus=='1'" style="color: green">
              <a-icon type="check-circle" />&nbsp;已通过
            </td>
          </tr>

          <br />
          <tr>
            <th colspan="4">数据信息</th>
          </tr>
          <tr>
            <td class="tit">梯速(m/s)</td>
            <td class="val">{{ entity.E_Speed }}</td>
            <td class="tit"></td>
            <td class="val">{{ }}</td>
          </tr>
          <tr>
            <td class="tit">载重(KG)</td>
            <td class="val">{{ entity.E_Load }}</td>
            <td class="tit">载重人数(人)</td>
            <td class="val">{{ entity.E_LoadNum }}</td>
          </tr>
          <tr>
            <td class="tit">最大停站数</td>
            <td class="val">{{ entity.E_MaxStop }}</td>
            <td class="tit">最大提升高度(m)</td>
            <td class="val">{{ entity.E_MaxLiftHeight }}</td>
          </tr>
          <tr>
            <td class="tit">井道宽度(mm)</td>
            <td class="val">{{ entity.E_ShaftWidth }}</td>
            <td class="tit">井宽修正值(mm)</td>
            <td class="val">{{ entity.E_ShaftWidthAdd }}</td>
          </tr>
          <tr>
            <td class="tit">井道深度(mm)</td>
            <td class="val">{{ entity.E_ShaftDepth }}</td>
            <td class="tit">井深修正值(mm)</td>
            <td class="val">{{ entity.E_ShaftDepthAdd }}</td>
          </tr>
          <tr>
            <td class="tit">机房宽度(mm)</td>
            <td class="val">{{ entity.E_MRWidth }}</td>
            <td class="tit">机房深度(mm)</td>
            <td class="val">{{ entity.E_MRDepth }}</td>
          </tr>
          <tr>
            <td class="tit">机房净高(mm)</td>
            <td class="val">{{ entity.E_MRNetHeight }}</td>
            <td class="tit">轿厢宽度(mm)</td>
            <td class="val">{{ entity.E_LiftCarWidth }}</td>
          </tr>
          <tr>
            <td class="tit">轿厢深度(mm)</td>
            <td class="val">{{ entity.E_LiftCarDepth }}</td>
            <td class="tit">轿厢净高(mm)</td>
            <td class="val">{{ entity.E_LiftCarNetHeight }}</td>
          </tr>
          <tr>
            <td class="tit">顶层高度(mm)</td>
            <td class="val">{{ entity.E_TopHeight }}</td>
            <td class="tit">顶高修正值(mm)</td>
            <td class="val">{{ entity.E_TopHeightAdd }}</td>
          </tr>
          <tr>
            <td class="tit">底坑深度(mm)</td>
            <td class="val">{{ entity.E_BottomDepth }}</td>
            <td class="tit">底深修正值(mm)</td>
            <td class="val">{{ entity.E_BottomDepthAdd }}</td>
          </tr>
          <tr>
            <td class="tit">轿厢门宽度(mm)</td>
            <td class="val">{{ entity.E_LiftCarDoorW }}</td>
            <td class="tit">轿厢门高度(mm)</td>
            <td class="val">{{ entity.E_LiftCarDoorH }}</td>
          </tr>
          <tr>
            <td class="tit">结构门宽度(mm)</td>
            <td class="val">{{ entity.E_StructuralDoorW }}</td>
            <td class="tit">结构门高度(mm)</td>
            <td class="val">{{ entity.E_StructuralDoorH }}</td>
          </tr>
          <tr>
            <td class="tit" rowspan="3">电梯备注</td>
            <td class="val" rowspan="3" colspan="5">{{ entity.Remark }}</td>
          </tr>
        </table>
      </a-form-model>
    </a-spin>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'center',
        zIndex: 1,
      }"
    >
      <a-button @click="onDrawerClose">关闭</a-button>
    </div>
  </a-drawer>
</template>
<script>
export default {
  name: 'DetailForm',
  props: {
    parentObj: Object
  },
  data () {
    return {
      layout: {
        labelCol: { span: 10 },
        wrapperCol: { span: 12 }
      },
      visible: false,
      loading: false,
      entity: {},
      rules: {},
      title: ''
    }
  },
  methods: {
    init () {
      this.visible = true
      this.entity = {}
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    openDrawer (id, title) {
      this.init()
      this.title = title
      if (id) {
        this.$http.post('/Base_BasicData/Base_ElevatorInfo/GetTheData', { id: id }).then((resJson) => {
          this.entity = resJson.Data
        })
      }
    },
    onDrawerClose () {
      this.visible = false
    },
    handleSubmit () {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        this.loading = true
        this.$http.post('/Base_BasicData/Base_ElevatorInfo/SaveData', this.entity).then((resJson) => {
          this.loading = false
          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false
            this.parentObj.getDataList()
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    }
  }
}
</script>
<style>
#tables {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 50px;
}

#tables td,
#tables th {
  border: 1px solid #ddd;
  padding: 8px;
}

#tables tr:nth-child(even) {
  background-color: #f2f2f2;
}

#tables tr:hover {
  background-color: #E6F7FF;
}

#tables th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #1890FF;
  color: white;
}

.tit {
  width: 20%;
  text-align: right;
}

.val {
  width: 30%;
  font-weight: bold;
}
</style>
